<template>
  <div class="fixed left-0 bottom-0 w-screen h-screen bg-white dark:bg-zinc-800 text-center xl:bg-zinc-200">
    <!-- 表单区 -->
    <div
      class="block xl:mt-8 px-3 mt-4 dark:bg-zinc-800 xl:bg-white xl:w-[388px] xl:dark:bg-zinc-900 xl:m-auto xl:py-4 xl:rounded-sm xl:shadow-lg">
      <h3 class="mb-2 font-semibold text-base text-main dark:text-zinc-300 hidden xl:block">
        账号登录
      </h3>
      <!-- 表单 -->
      <vee-form @submit="onLoginHandler">
        <!-- 用户名 -->
        <vee-field
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b-[1px] w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:dark:bg-zinc-900"
          name="username" type="text" placeholder="用户名" autocomplete="on" :rules="validateUsername"
          v-model="loginForm.username" />
        <vee-error-message class="text-sm text-red-600 block mt-0.5 text-left" name="username"></vee-error-message>
        <vee-field
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b-[1px] w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:dark:bg-zinc-900"
          name="password" type="password" placeholder="密码" autocomplete="on" :rules="validatePassword"
          v-model="loginForm.psw" />
        <vee-error-message class="text-sm text-red-600 block mt-0.5 text-left" name="password">
        </vee-error-message>
        <div class="pt-1 pb-3 leading-[0px] text-right">
          <a class="inline-block p-1 text-zinc-400 text-right dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400 text-sm duration-400 cursor-pointer"
            @click="onToRegister">
            去注册
          </a>
        </div>

        <m-button class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-800 text-zinc-50 p-1" :isActiveAnim="true"
          :loading="loading" @click="onLogin">
          登录
        </m-button>
      </vee-form>

    </div>
    <!-- <silder-captcha-vue
      v-if="isSliderCaptchaVisible"
      @close="isSliderCaptchaVisible = false"
      @success="onCaptchaSuccess"
    ></silder-captcha-vue> -->
  </div>
</template>
<script setup>
import {
  Form as VeeForm,
  Field as VeeField,
  ErrorMessage as VeeErrorMessage
} from 'vee-validate'
import { validateUsername, validatePassword } from '../validate'
// import SilderCaptchaVue from './slider-captcha.vue'
import { reactive, ref, toRefs } from 'vue'
import { LOGIN_TYPE_USERNAME } from '@/constants'
import { useRouter } from 'vue-router'
import userStore from '@/piniastore/userInfo/index'
import storage from '@/utils/goodStorageUtil'

const router = useRouter()

// 控制 sliderCaptcha 展示
const isSliderCaptchaVisible = ref(false)

/**
 * 人类行为验证通过
 */
const onCaptchaSuccess = async () => {
  isSliderCaptchaVisible.value = false
  // 登录操作
  onLogin()
}

/**
 * 登录触发
 */
const onLoginHandler = () => {
  isSliderCaptchaVisible.value = true
}

/**
 * 用户登录行为
 */
const loading = ref(false)
const loginForm = reactive({
  username: 'user1',
  psw: 'password1'
})


const onLogin = async () => {
  await userStore().login(loginForm.username, loginForm.psw)
  if (storage.get('token')) {
    router.push({ name: 'ctgy' })
  }
}

const onToRegister = () => {
  // 移动端下跳转的类型
  store.commit('app/changeRouterType', 'push')
  router.push('/register')
}
</script>
